<template>
  <div class="addResearch">
    <el-form :model="researchForm"  ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="标题：" prop="region">
        <el-col :span="12">
          <el-input v-model="researchForm.name" placeholder="请输入标题"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="简介：" prop="region" class="msTop">
        <el-col :span="12">
          <el-input v-model="researchForm.introduction" placeholder="请输入简介"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item v-show="operateType === 'edit'" label="图片展示：" prop="region" class="msTop">
        <img class="imgSize" :src="researchForm.picture">
      </el-form-item>
      <el-form-item :label="operateType === 'edit' ? '修改文章图片：': '上传文章图片'" class="msTop">
        <el-upload
            class="upload-demo"
            action="http://39.106.171.39:8011/mbl/FileController/uploadFile"
            ref="newsUpload"
            :on-change="handleFileChange"
            :file-list="researchFileList"
            :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" :loading="fileLoading">上传到服务器</el-button>
          <!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>
      </el-form-item>
      <el-form-item label="代表性文章：" v-show="operateType === 'edit'" prop="name">
        <el-col :span="18">
          <div v-show="researchForm.articleResultList != null" v-for="(item,index) in researchForm.articleResultList" :key="index">
            <span>{{index+1}}、{{item.title}}——{{item.author}}——{{item.journalname}} </span>
            <el-button slot="append" @click="toDeleteArticle(item.id,index)">删除</el-button>
          </div>
          <div v-show="!researchForm.articleResultList">
            <span>暂未添加代表性文章</span>
          </div>
          <!--                  <div v-show="!teacherForm.educations">-->
          <!--                    <span>暂未添加教育经历</span>-->
          <!--                  </div>-->
        </el-col>
      </el-form-item>
      <el-form-item label="是否显示：" class="msTop">
        <el-radio-group v-model="researchForm.flag">
          <el-radio :label="'1'" selected>否</el-radio>
          <el-radio :label="'0'">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item class="msTop">
        <el-button class="submit" type="primary" @click="addSubmit" :loading="loading">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { uploadFile, addResearch, updateResearch, deleteResearchArticle } from '@/api/eventManage'
  export default {
    props: {
      operateType: {
        type: String,
        default: () => 'add'
      },
      researchInfo: {
        type: Object,
        default: () => {
          return {
            id: '',
            name: '',
            introduction: '',
            picture:'',
            flag: '0'
          }
        }
      }
    },
    watch: {
      researchInfo: {
        handler(newVal, objVal) {
          if(newVal !== objVal){
            this.researchForm = newVal
          }
        },
      }
    },
    data() {
      return {
        loading: false,
        fileLoading: false,
        successImagUrl: '',
        researchFileList: [],
        researchForm: this.researchInfo
      }
    },
    created() {
    },
    methods: {
      async addSubmit(){
        if(this.operateType === 'add'){
          try {
            this.researchForm.picture = this.successImagUrl
            this.loading = true
            await addResearch(this.researchForm)
            this.$message({
              type: 'success',
              message: '成功'
            })
            this.$emit('updateTable')
          } catch (e) {
            console.log( new Error(e))
          }
          this.loading = false
        } else {
          try {
            this.researchForm.picture = this.successImagUrl ? this.successImagUrl : this.researchForm.picture
            this.loading = true
            await updateResearch(this.researchForm)
            this.$message({
              type: 'success',
              message: '成功'
            })
            this.$emit('updateTable')
          } catch (e) {
            console.log( new Error(e))
          }
          this.loading = false
        }
      },
      handleFileChange(file, FileList){
        this.researchFileList = FileList
      },
      async submitUpload(){
        let formData = new FormData()
        formData.append('file', this.researchFileList[0].raw)
        // this.newsFileList.forEach(function (file) {
        //   formData.append("file", file.raw, file.name);
        // })
        this.fileLoading = true
        const res = await uploadFile(formData)
        this.successImagUrl = res.message
        this.$message({
          type: 'success',
          message: '上传成功'
        })
        this.fileLoading = false
      },
      async deleteArticle(id, index){
        try{
          await deleteResearchArticle({id: id})
          this.$message({
            type: 'success',
            message: '成功'
          })
          this.researchForm.articleResultList.splice(index,1)
          // this.$emit('updateTable')
        } catch (e) {
          console.log(new Error(e))
        }
      },
      toDeleteArticle(id, index){
        const _this = this
        this.$alert('确定删除吗', '警告', {
          confirmButtonText: '确定',
          callback: (action) => {
            if(action === 'confirm'){
              _this.deleteArticle(id, index)
            }
          }
        });
      }
    },
    computed: {},
    components: {}
  }
</script>

<style lang="scss" scoped>
  .addResearch{
    .msTop{
      margin-top: 20px;
      .imgSize{
        width: 50px;
        height: 50px;
      }
    }
  }
</style>
